<template>
  <div>
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="backHandle"
      title="登录"
      right-text="注册"
      right-arrow
      @click-right="regist"
    />
    <div class="background">
      <label for="" class="header">学生电影社区欢迎你</label>
      <br />
      <label for="" class="fu">There is the best movie community!</label>
    </div>
    <div class="main">
      <van-form @submit="onSubmit">
        <van-field
          v-model="info.username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="info.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            登录
          </van-button>
          忘记密码
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "../../../node_modules/qs";
import { Toast } from "vant";
export default {
  data() {
    return {
      info: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    onSubmit(values) {
      // console.log('submit', values);

      axios
        .get("http://localhost:8888/login?" + qs.stringify(values))
        .then((res) => {
          console.log(res.data);
          localStorage.setItem("username", values.username);
          if (res.data.status == 200) {
            this.$router.push("/");
            sessionStorage.setItem("token", res.data.token);
            sessionStorage.setItem("username", this.info.username);
          } else if (res.data.status == 400) {
            // alert('请重新输入密码')
            Toast.fail("请重新输入密码");
            this.name = {};
          } else if (res.data.status == 500) {
            // alert("该用户不存在")
            Toast.fail("该用户不存在");
            this.info = {};
          }
        });
    },
    regist() {
      this.$router.push({ name: "Regist" });
    },
    backHandle() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.header {
  font-size: x-large;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  line-height: 5rem;
}
.fu {
  text-align: left;
  font-style: oblique;
  font-family: "Times New Roman", Times, serif;
  /* font-weight: lighter; */
  text-align: right !important;
}
.background {
  color: #fff;
  height: 200px;
  background-size: 100% 100%;
  /* height:px; */
  background: url("../../assets/moviepicture/1604471922627.jpg") no-repeat
    center;
}
</style>
